 <template>
   <div class="goodList">
     <Form
       ref="formValidate"
       :model="formValidate"
       :label-width="120"
       label-position="right"
       class="tabform"
     >
       <Row type="flex" :gutter="24">
         <Col v-bind="grid" v-if="!liveStatus">
		   <FormItem label="选择仓库：" prop="address_id" label-for="address_id" >
		       <Select v-model="artFrom.cang_name" placeholder="请选择存放的仓库" @on-change="userSearchs" clearable>
		        							<Option
		   	    v-for="item in cangList"
		   	    :disabled="item.pid === 0"
		   	    :value="item.name"
		   	    :key="item.id"
		   	    >{{item.name }}</Option
		   	  >
		   	</Select>
		   		  
		   </FormItem>

         </Col>
		 
         <Col v-bind="grid" v-if="!type && diy">
           <FormItem label="食材类型：" label-for="pid">
             <Select
               v-model="goodType"
               style="width: 200px"
               clearable
               @on-change="userSearchs"
             >
               <Option
                 v-for="item in goodList"
                 :value="item.activeValue"
                 :key="item.activeValue"
                 >{{ item.title }}
               </Option>
             </Select>
           </FormItem>
         </Col>
         <Col v-bind="grid">
           <FormItem label="食材搜索：" label-for="store_name">
             <Input
               search
               enter-button
               placeholder="请输入食材名称/关键字/编号"
               v-model="artFrom.cate_name"
               style="width: 250px"
               @on-search="userSearchs"
			   @on-change="userSearchs"
             />
           </FormItem>
         </Col>
       </Row>
     </Form>
     <Table
       ref="table"
       no-data-text="暂无数据"
       @on-selection-change="changeCheckbox"
       no-filtered-data-text="暂无筛选结果"
       max-height="400"
       :columns="columns4"
       :data="tableList"
       :loading="loading"
     >
       <template slot-scope="{ row, index }" slot="image">
         <div class="tabBox_img" v-viewer>
           <img v-lazy="row.image" />
         </div>
       </template>
     </Table>
     <div class="acea-row row-right page">
       <Page
         :total="total"
         show-elevator
         show-total
         @on-change="pageChange"
         :page-size="formValidate.limit"
       />
     </div>
     <div class="footer" slot="footer" >
       <Button
         type="primary"
         size="large"
         :loading="modal_loading"
         long
         @click="ok"
         >提交</Button
       >
     </div>
   </div>
 </template>
 
 <script>
 import { mapState } from "vuex";
 import { treeListshiApi, changeListApi } from "@/api/product";
 import {kucungoodsListApi, mykucunListApi, mykucunCreateApi,cangkuListApi, productEditdeviceApi, setShowApi, treeListApi } from '@/api/school'
 import { liveGoods } from "@/api/live";
 import { getProductList } from "@/api/diy";
  
 
 export default {
   name: "index",
   props: {
     is_new: {
       type: String,
       default: "",
     },
     type: {
       type: Number,
       default: 0,
     },
     diy: {
       type: Boolean,
       default: false,
     },
     ischeckbox: {
       type: Boolean,
       default: false,
     },
     liveStatus: {
       type: Boolean,
       default: false,
     },
     isLive: {
       type: Boolean,
       default: false,
     },
     datas: {
       type: Object,
       default: function () {
         return {};
       },
     },
   },
   data() {
     return {
       modal_loading: false,
       cangList: [],
       treeSelect: [],
       formValidate: {
         page: 1,
         limit: 15,
         cate_id: "",
         store_name: "",
         is_new: this.is_new,
       },
       total: 0,
       modals: false,
       loading: false,
       grid: {
         xl: 10,
         lg: 10,
         md: 12,
         sm: 24,
         xs: 24,
       },
	  artFrom: {
	      pid: 0,
	      is_show: '',
	      page: 1,
	      cate_name: '',
	      limit: 15
	  },
       tableList: [],
       currentid: 0,
       productRow: {},
       columns4: [
         {
           title: "库存ID",
           key: "id",
         },
         {
           title: "食材名称",
           key: "goodsid",
           minWidth: 200,
         },
         {
           title: "单位",
           key: "danwei",
          },
         {
           title: "规格",
           key: "guige",
         },
         {
           title: "库存数量",
           key: "available",
         },
         {
           title: "所选仓库",
           key: "address_id",
           minWidth: 150,
         },
       ],
       columns5: [
         {
           title: "食材ID",
           key: "id",
         },
         {
           title: "图片",
           slot: "image",
         },
         {
           title: "食材名称",
           key: "name",
           minWidth: 250,
         },
       ],
       images: [],
       many: "",
       goodType: "",
       goodList: [
         {
           activeValue: 0,
           title: "食材列表",
         },
         {
           activeValue: "4",
           title: "热门榜单",
         },
         {
           activeValue: "5",
           title: "首发新品",
         },
         {
           activeValue: "6",
           title: "促销单品",
         },
         {
           activeValue: "7",
           title: "精品推荐",
         },
       ],
     };
   },
   computed: {},
   created() {
	   
	   console.log(444);
     let radio = {
       width: 60,
       align: "center",
       render: (h, params) => {
         let id = params.row.id;
         let flag = false;
         if (this.currentid === id) {
           flag = true;
         } else {
           flag = false;
         }
         let self = this;
         return h("div", [
           h("Radio", {
             props: {
               value: flag,
             },
             on: {
               "on-change": () => {
                 self.currentid = id;
                 this.productRow = params.row;
                 this.$emit("getProductId", this.productRow);
				 
				 this.images = [];
				 this.images.push(this.productRow.image);
				 //images
				 console.log(this.productRow,'66');
				 
     //             if (this.productRow.id) {
     //               if (this.$route.query.fodder === "image") {
     //                 /* eslint-disable */
     //                 let imageObject = {
     //                   image: this.productRow.image,
     //                   product_id: this.productRow.id,
     //                 };
     //                 form_create_helper.set("image", imageObject);
     //                 form_create_helper.close("image");
     //               }
     //             } else {
     //               this.$Message.warning("请先选择食材");
     //             }
               },
             },
           }),
         ]);
       },
     };
 
     let checkbox = {
       type: "selection",
       width: 60,
       align: "center",
     };
     let many = "";
     if (this.ischeckbox) {
       many = "many";
     } else {
       many = this.$route.query.type;
     }
     this.many = many;
     if (many === "many") {
       this.columns4.unshift(checkbox);
       this.columns5.unshift(checkbox);
     } else {
       this.columns4.unshift(radio);
       this.columns5.unshift(radio);
     }
   },
   mounted() {
     this.goodsCategory();
     if (this.diy) {
       this.productList();
     } else {
       this.getList();
     }
   },
   methods: {
     productList() {
       let data = {
         page: this.formValidate.page,
         limit: this.formValidate.limit,
         cate_id: this.formValidate.cate_id,
         store_name: this.formValidate.store_name,
         type: this.type ? this.type : this.goodType,
       };
       this.loading = true;
       getProductList(data)
         .then((res) => {
           let data = res.data;
           this.tableList = data.list;
           this.total = res.data.count;
           this.loading = false;
         })
         .catch((res) => {
           this.loading = false;
           this.$Message.error(res.msg);
         });
     },
     changeCheckbox(selection) {
		 
		 
       let images = [];
       selection.forEach(function (item) {
         let imageObject = { image: item.image, product_id: item.id };
         images.push(imageObject);
       });
       this.images = images;
	   
	   console.log(selection,'777666');
	   
       this.$emit("getProductDiy", selection);
     },
     // 食材分类；
     goodsCategory() {
/*       treeListshiApi(2)
         .then((res) => {
           this.treeSelect = res.data;
         })
         .catch((res) => {
           this.$Message.error(res.msg);
         });
		 */
		 let that = this;
		 cangkuListApi(this.artFromsupp)
		  .then((res) => {
		 			console.log(res,'0000');
		 	 that.cangList = res.data.list;
		  })
		  .catch((res) => {
		    that.$Message.error(res.msg);
		  });
		 		
		 
     },
     pageChange(index) {
        this.artFrom.page = index;
	    this.getList();
     },
     // 列表
     getList() {
       this.loading = true;
       if (!this.liveStatus) {
         if (this.isLive) {
           this.formValidate.is_live = 1;
         }
      
         mykucunListApi(this.artFrom)
           .then(async (res) => {
				
			  
             let data = res.data;
			 
			 console.log(data,'3rwerwr');
			 
             this.tableList = data.list;
             this.total = res.data.count;
             this.loading = false;
           })
           .catch((res) => {
             this.loading = false;
             this.$Message.error(res.msg);
           });
       } else {
         liveGoods({
           is_show: "1",
           status: "1",
           live_id: this.datas.id,
           kerword: this.formValidate.store_name,
           page: this.formValidate.page,
           limit: this.formValidate.limit,
         }).then(async (res) => {
             let data = res.data;
             data.list.forEach((el) => {
               el.image = el.cover_img;
             });
             this.tableList = data.list;
             this.total = res.data.count;
             this.loading = false;
           })
           .catch((res) => {
             this.loading = false;
             this.$Message.error(res.msg);
           });
       }
     },
     ok() {
		  
	   this.$emit("getProductId", this.productRow);
	  
	  return true;
	   
       if (this.images.length > 0) {
         if (this.$route.query.fodder === "image") {
           let imageValue = form_create_helper.get("image");
           form_create_helper.set("image", imageValue.concat(this.images));
           form_create_helper.close("image");
         } else {
           this.$emit("getProductId", this.productRow);
         }
       } else {
         this.$Message.warning("请先选择食材");
       }
     },
     // 表格搜索
     userSearchs() {
       this.currentid = 0;
       this.productRow = {};
       this.formValidate.page = 1;
       if (this.diy) {
         this.productList();
       } else {
         this.getList();
       }
     },
     clear() {
       this.productRow.id = "";
       this.currentid = "";
     },
   },
 };
 </script>
 
 <style scoped lang="stylus">
 .footer {
   margin: 15px 0;
 }
 
 .tabBox_img {
   width: 36px;
   height: 36px;
   border-radius: 4px;
   cursor: pointer;
 
   img {
     width: 100%;
     height: 100%;
   }
 }
 
 
 .tabform {
   >>> .ivu-form-item {
     margin-bottom: 16px !important;
   }
 }
 
 .btn {
   margin-top: 20px;
   float: right;
 }
 
 .goodList {
   >>> table {
     width: 100% !important;
   }
 }
 </style>
 